<template>
    <view class="user">
        <view class="user_info">
            <view class="profile">
                <image v-if="memberInfo?.avatar" :src="memberInfo.avatar" />
                <image v-else src="@/static/images/mine/missing-face.png" />
            </view>
            <view class="info">
                <view class="name" v-if="isLogin">{{ memberInfo?.nickname }}</view>
                <view class="name" v-else @click="toLogin">请先登录</view>
                <view class="icon" @click="toMyInfo" v-if="role == 'worker'">
                    <image v-if="isAuth"
                        src="https://www.banbanhuo.com/minio/banbanhuo/ea04d18782557e9871368107546d373262ace56a4355cfffb18d9f98747f1b81.png" />
                    <image v-else
                        src="https://www.banbanhuo.com/minio/banbanhuo/e0541e945e20f8abd46e0e35c8a4832c7bc67a7075094dcb09f52a91f5a49872.png" />
                </view>
            </view>
            <!-- <view class="qrcode" @click="toQrCode">
                <image class="qrcode_img" src="@/static/images/mine/qrcode.png" />
                <text>专属二维码</text>
            </view> -->
        </view>
        <view class="fund">
            <view class="fund_content">
                <view class="top flex_b">
                    <view class="item mt24">
                        <view class="label">余额（元）</view>
                        <view class="value">{{ balance.toFixed(2) }}</view>
                    </view>
                    <view class="fund_btn flex_c" v-if="role == 'worker'" @click="toWallet">去提现</view>
                </view>
                <view class="bottom flex_l">
                    <view class="item">
                        <view class="label">总支出（元）</view>
                        <view class="value">{{ pay.toFixed(2) }}</view>
                    </view>
                    <view class="item">
                        <view class="label">订单数</view>
                        <view class="value">{{ orderTotal }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import type { MemberInfo } from '@/types';
const role = uni.getStorageSync("role")

const props = withDefaults(defineProps<{
    memberInfo?: MemberInfo
    isLogin: boolean
    balance: number
    pay: number
    orderTotal: number
    isAuth: boolean
}>(), {
    isLogin: false,
    balance: 0,
    pay: 0,
    orderTotal: 0,
    isAuth: false
})

// 跳转我的信息
const toMyInfo = () => {
    if (!props.isLogin) return
    uni.navigateTo({
        url: '/pages/mine/authInfo/authInfo'
    })
}
// 跳转到钱包
const toWallet = () => {
    uni.navigateTo({
        url: "/pages/mine/wallet/wallet"
    })
}
// 查看二维码
 const toQrCode = async () => {
    uni.navigateTo({
        url: '/pages/mine/qrCode/qrCode'
    })
}
const toLogin = () => {
    uni.navigateTo({
        url: '/pages/index/login'
    })
}
</script>

<style lang="scss" scoped>
.user {
    width: 750rpx;
    height: 498rpx;
    background: linear-gradient(95deg, #ffffff 0%, #fffcf6 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    overflow: hidden;
    padding-left: 32rpx;
    box-sizing: border-box;
    position: relative;

    .user_info {
        display: flex;
        margin-top: 24rpx;

        .profile {
            width: 96rpx;
            height: 96rpx;
            margin-right: 16rpx;
            border-radius: 50%;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .info {
            // width: 196rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .name {
                font-weight: 600;
                font-size: 32rpx;
                color: #222222;
            }

            .icon {
                width: 158rpx;
                height: 44rpx;
                margin-top: 8rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .qrcode {
            width: 188rpx;
            height: 54rpx;
            background: #ffffff;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(34, 34, 34, 0.1);
            border-radius: 27rpx 0 0 27rpx;
            position: absolute;
            right: 0;
            top: 50rpx;
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #555555;

            .qrcode_img {
                width: 38rpx;
                height: 38rpx;
                margin: 0 6rpx;
            }
        }
    }

    .fund {
        width: 698rpx;
        height: 316rpx;
        margin-top: 38rpx;

        .fund_content {
            width: 698rpx;
            height: 316rpx;
            background-image: url('https://www.banbanhuo.com/minio/banbanhuo/b8a132d90783e5b834081433d4eaff2fadc749e2a4644cf92507909b7322a95f.png');
            background-size: 698rpx 316rpx;
            background-repeat: no-repeat;
            padding: 0 24rpx;
            box-sizing: border-box;

            .top {
                width: 100%;
                height: 164rpx;
                border-bottom: 2rpx solid #ffb16c;

                .fund_btn {
                    width: 144rpx;
                    height: 64rpx;
                    background: #FF9F4E;
                    border-radius: 34rpx 34rpx 34rpx 34rpx;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #FFFFFF;
                }
            }

            .bottom {
                width: 100%;
                height: 150rpx;
            }

            .item {
                width: 50%;

                .label {
                    font-size: 26rpx;
                    color: #FFFFFF;
                }

                .value {
                    font-family: "DIN";
                    font-weight: bold;
                    font-size: 60rpx;
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>